<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';
import { useRole } from '@/api/systemUser';
import type { IFormValue } from './cpn/form/type';
import type { IRoleList } from './type';
import type { IUserListInfo } from '@/api/systemUser/type';

// form
const Form = defineAsyncComponent(() => import('./cpn/form/index.vue'));
// 表格
const Table = defineAsyncComponent(() => import('./cpn/table/index.vue'));
// 新增
const Add = defineAsyncComponent(() => import('./cpn/add/index.vue'));

const tableRef = ref();
const addRef = ref();
// 角色列表
const roleList = ref<IRoleList[]>([]);

// 获取所有角色
const handleRole = async () => {
	try {
		const data = await useRole();
		roleList.value = data.map(item => ({ value: item, label: item }));
	} catch (error) {
		throw new Error('获取用户列表未知异常,请联系开发人员');
	}
};
handleRole();
// 处理搜索
const handleSearch = (params: IFormValue) => {
	tableRef.value?.handleSearch(params);
};
// 处理新增
const handleAdd = () => {
	addRef.value?.openDialogVisible();
};
// 处理编辑
const handleEdit = (val: IUserListInfo) => {
	addRef.value.handleEdit(val);
};
</script>

<template>
	<div class="system-user">
		<Form :role-list="roleList" @handle-search="handleSearch" @handle-add="handleAdd" />
		<Table ref="tableRef" @handle-edit="handleEdit" @handle-search="handleSearch" />
		<Add ref="addRef" :role-list="roleList" @handle-search="handleSearch" />
	</div>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
